<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/*外边距margin属性:[微调文字或者图片]
			margin使用问题1：自适应居中、建议使用div、套块元素、行快内元素、行内元素
			margin使用问题2：行属性，上下边距失效 右左外边距
			  行元素：不可以设置宽高【高---不可以动上下移动】、在一行内显示【宽---可以动上下移动】
			使用问题3：垂直外边距
			使用问题4
			*/
			img{
				border: 1px solid red;
				/*margin 1个属性值 顺势针：上 右 下 左*/
				margin:200px;
				/*margin: 2个属性 顺势针 上下 左右*/
				margin:10px 200px;
				/*常用：盒子自适应居中---失效
                 行内块：可以设置高宽、
				margin使用问题：1.自适应居中     2.必须设置宽度
				*/
			width: 100%;
				margin:0 auto;
				/*margin: 3个属性 顺势针 上 右左 下 */
				ma  rgin:100px 200px 300px;
				/*margin: 4个属性 顺势针 上 右 下 左 */
				mar  gin:100px 200px 300px 400px;
				
			}
			h1{
				/*块元素：可以设置高宽、不在一行内显示、无法居中，内置文本
				test-align:center
				*/
				/*常用：盒子自适应居中---设置宽度*/
				width: 100%;
				border: 1px solid red;
				text-align:center;
				margin: 100px 200px;
			}
			span{
				/*行元素：不可以设置高宽、在一行内显示、无法居中，内置文本
				test-align:center
				*/
				/*常用：盒子自适应居中---设置宽度*/
				width: 100%;
				border: 1px solid red;
				margin:100px 200px;
			}
			div{
				width:200px;
				height: 200px;
				background:red;
				margin: 0 auto;
			}
			
		</style>
	</head>
	<body>
		<div></div>
		<!-- 框模型、盒子模型,四个部分组成，
		                     外边距 边框以外四周，叫外边距
							 margin属性
							 边框：--
							 内边距：边框以内 与内容 之间距离，叫做内边距
							 内容：块、行、行内元素本身宽高
		所有元素存在于框模型中-->
		<h1>块级元素</h1>
		<img src="img/姜饼人.png" width="300px" height="300px" alt="圣诞">
		<span>行内元素：姜饼人</span>
	</body>
	
</html>